<template>
  <div>
    <div>
      <div v-show="showTable">
        <h3>详细任务信息：</h3>
        <!-- 修改 el-descriptions 组件的属性 -->
        <el-descriptions :data="[selectedRow]" border :column="1">
          <el-descriptions-item label="账号">{{ selectedRow.account }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{ selectedRow.name }}</el-descriptions-item>
          <el-descriptions-item label="标题">{{ selectedRow.title }}</el-descriptions-item>
          <el-descriptions-item label="信息">{{ selectedRow.message }}</el-descriptions-item>
          <el-descriptions-item label="日期时间">{{ selectedRow.datetime }}</el-descriptions-item>
          <el-descriptions-item label="附件路径">{{ selectedRow.annexPath }}</el-descriptions-item>
          <el-descriptions-item label="请求ID">{{ selectedRow.reqId }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{
            selectedRow.state ? '已完成' : '未完成'
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- <el-table >
      <el-table-column prop="title" label="任务名"></el-table-column>
      <el-table-column prop="account" label="任务编号"></el-table-column>
      <el-table-column prop="annexPath" label="任务文件"></el-table-column>
      <el-table-column prop="datetime" label="任务发布时间"></el-table-column>
      <el-table-column prop="message" label="相关信息"></el-table-column>
    </el-table> -->
    </div>
    <div>
      <el-table :data="answer" style="width: 1226px">
        <el-table-column prop="name" label="回复人"></el-table-column>
        <el-table-column prop="message" label="回复"></el-table-column>
        <el-table-column prop="datetime" label="回复时间"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { useRoute } from 'vue-router'
import { onMounted, reactive } from 'vue'

export default {
  setup() {
    const route = useRoute()
    const reqId = route.query.reqId
    console.log(route.query.reqId)
    const answer = reactive([])
    /// const tableData = reactive([])
    const getState = async (reqId) => {
      const { data: state } = await axios.post('user/function/achieveTask', {
        reqId: reqId
      })
      console.log(state.data)
    }
    const getAnswer = async (reqId) => {
      console.log(reqId)
      const { data: res } = await axios.post('user/function/checkAnswer', {
        reqId: reqId
      })

      console.log(reqId)
      if (res.data != null || undefined) {
        answer.splice(
          0,
          answer.length,
          ...res.data.map((answerI) => ({
            ...answerI
          }))
        )
      }

      console.log(answer)
    }
    getState(reqId)
    getAnswer(reqId)
    return {
      answer
    }
  }
}
</script>
